<template>
  <div class="user">
    <PageForm
      :pageFormConfig="FormConfigRef"
      @resetBtnClick="resetBtnClick"
      @searchBtnClick="searchBtnClick"
    />
    <PageTable
      :pageTableConfig="pageTableConfig"
      pageName="users"
      title="用户"
      ref="pageTableRef"
      @newBtnClick="newBtnClick"
      @editBtnClick="editBtnClick"
    />
    <PageModel
      :creatOrEdit="creatOrEdit"
      :defaultInfo="defaultInfo"
      ref="pageModelRef"
      pageName="users"
      :modelConfig="modelConfigRef"
      title="用户"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'
import PageForm from '@/components/PageForm/PageForm.vue'
import PageTable from '@/components/PageTable/PageTable.vue'
import PageModel from '@/components/PageModel/PageModel.vue'
import { pageFormConfig } from './pageFormConfig'
import { pageTableConfig } from './pageTableConfig'
import { pageModelConfig } from './pageModelConfig'
import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModel } from '@/hooks/usePageModel'
export default defineComponent({
  components: {
    PageForm,
    PageTable,
    PageModel
  },
  setup() {
    const store = useStore()
    const [pageTableRef, resetBtnClick, searchBtnClick] =
      usePageSearch(pageFormConfig)
    const newCallback = () => {
      const passwordItem = pageModelConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passwordItem!.isHidden = false
    }
    const editCallback = () => {
      const passwordItem = pageModelConfig.formItems.find(
        (item) => item.field === 'password'
      )
      passwordItem!.isHidden = true
    }
    //创建options选项
    const modelConfigRef = computed(() => {
      const departmentItem = pageModelConfig.formItems.find(
        (item) => item.field === 'departmentId'
      )
      departmentItem!.options = store.state.entireDepartment.map((item) => {
        return { title: item.name, value: item.id }
      })
      const roleItem = pageModelConfig.formItems.find(
        (item) => item.field === 'roleId'
      )
      roleItem!.options = store.state.entireRole.map((item) => {
        return { title: item.name, value: item.id }
      })
      return pageModelConfig
    })
    const FormConfigRef = computed(() => {
      const departmentItem = pageFormConfig.formItems.find(
        (item) => item.field === 'departmentId'
      )
      departmentItem!.options = store.state.entireDepartment.map((item) => {
        return { title: item.name, value: item.id }
      })

      return pageFormConfig
    })
    const [pageModelRef, defaultInfo, newBtnClick, editBtnClick, creatOrEdit] =
      usePageModel(newCallback, editCallback, pageModelConfig)

    return {
      creatOrEdit,
      FormConfigRef,
      pageModelConfig,
      pageFormConfig,
      pageTableConfig,
      pageTableRef,
      resetBtnClick,
      searchBtnClick,
      pageModelRef,
      defaultInfo,
      newBtnClick,
      editBtnClick,
      modelConfigRef
    }
  }
})
</script>

<style scoped lang="less">
.user {
  .box {
    margin-top: 20px;
  }
}
</style>
